<template>
	<mt-popup v-model="popupVisible" position="right" class="store-choice" :modal="false">
		<div class="page">
			<div class="scroll-view">
				<customHeader middleTitle="门店列表" @leftCallBack="back" :jsBridgeBack="false" />
				<div class="tip-msg" v-if="tipMsg">{{tipMsg}}</div>
				<div class="totalCount">涉及到的门店{{selectCount}}家</div>
				<div class="scroll-ct page-body">
					<div class="store-choice-list" v-for="(item,index) in listData" :key="index">
						<div class="head">{{item.head}}</div>
						<div class="item" v-for="(childitem,index) in item.children" :key="index">
							<div class="item-ct">
								<span>{{childitem.label}}</span>
							</div>
						</div>
					</div>
					<noData msg="暂无数据" v-if="listData.length===0" />
				</div>
			</div>
		</div>
	</mt-popup>
</template>

<script>
	import Vue from "vue";
	import {
		Popup,
		Toast
	} from "mint-ui";
	import customHeader from "../../components/header/header";
	import noData from "../../components/noData/noData";
	Vue.component(Popup.name, Popup);
	export default {
		name: "StoreDetails",
		data() {
			return {
				selectCount: 0,
				listData: [], //门店列表数据
				popupVisible: false,
				dataSource: [], //接口返回的data
			};
		},
		props: {
			//父组件传过来的数据源
			sourceData: Object,
			//门店列表的请求接口地址（默认请求：/newapp/shop/getShopSelect.do）
			reqParams: {
				type: Object,
			},
			//是否过滤掉其他状态门店，只显示审核通过的门店
			statusFilter: {
				type: Boolean,
				default: false
			},
			tipMsg: {
				type: String,
			}
		},
		methods: {
			popupShow() {
				this.popupVisible = true;
			},

			back() {
				this.popupVisible = false;
			},

			checkDataSource(data, currentSelect) {
				let shopList = [];
				if (data != null && JSON.stringify(data) != "{}") {
					for (var cityName in data) {
						var childrenList = [];
						if (data[cityName] != null && data[cityName].length > 0) {
							for (var i = 0; i < data[cityName].length; i++) {
								if (!this.statusFilter || (this.statusFilter && (data[cityName][i].auditStatus !== 1 &&
										data[cityName][i].auditStatus !== 3))) {
									childrenList.push({
										key: data[cityName][i].shopId,
										label: data[cityName][i].shopName,
									});
								}
							}
						}
						childrenList.length > 0 &&
							shopList.push({
								head: cityName,
								children: childrenList,
							});
					}
				}
				this.getSelectCount(shopList);
				return shopList;
			},
			getData() {
				if (this.sourceData) {
					this.listData = this.checkDataSource(this.sourceData, this.currentSelect);
					return;
				}
				if (!this.reqParams.url) {
					this.reqParams = {
						url: "/newapp/shop/getShopSelect.do",
						type: "get",
						data: null
					};
				}
				this.ajax({
						url: this.reqParams.url,
						type: this.reqParams.type,
						data: this.reqParams.data,
						controlLoading: false
					})
					.then(res => {
						if (res.success) {
							const data = res.resultObject;
							this.dataSource = data;
							this.listData = this.checkDataSource(data, this.currentSelect);
						} else {
							Toast(res.msg);
						}
					})
					.catch(function(err) {

					});
			},
			getSelectCount(listData) {
				let selectCount = 0;
				for (let i = 0; i < listData.length; i++) {
					selectCount = selectCount + listData[i].children.length;
				}
				this.selectCount = selectCount;
			}
		},
		components: {
			customHeader,
			noData
		},
		watch: {
			popupVisible(newVal, oldVal) {
				if (newVal) {
					this.getData();
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import "StoreChoice";
</style>